<template>
<button @click="getWeather()" mode="aspectFill">获取天气预报</button>
	 <view class="weather" v-if="days">
	     <view class="title">明日天气:</view>
	     <view v-if="loading">加载中...</view>
	     <view v-else class="info">
	       <view>日期：{{ days.date }}日</view>
	       <view>星期：{{ days.week }}</view>
	       <view>最高温：{{ days.high }}℃</view>
	       <view>最低温：{{ days.low }}℃</view>
	     </view>
	   </view>
</template>

<script>
	export default {
		data() {
			return {
				days:null
			}
		},
		
		methods: {
			getWeather() {
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						console.log("success----" + JSON.stringify(res));
						
						const tomorrow=res.data.data.forecast[1];
						 this.days = {
						        date:tomorrow.date,
						          week: tomorrow.week,
						          high:tomorrow.high.replace('℃',''),
						          low: tomorrow.low.replace('℃','')
						        }
								},
					
					fail: (eMsg) => {
						console.log("requst fail----" + eMsg);
						
					}
					
				});
			}
		}
	};
</script>

<style>
	button {
		margin: 20px;
		
	}

	.weather {
		padding: 20rpx;
		text-align: center;
	}
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align:left;
		margin-bottom: 30rpx;
	}

	.info {
		background: #fff;
		padding: 30rpx;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 8rpx #eee;
	}
.info view {
		margin: 15rpx 0;
		font-size: 28rpx;
	}
	
</style>